<template>
  <div class="Driverfiledetails">
    <mt-cell title="航空器损伤信息记录表:"></mt-cell>
    <mt-cell title="受损类型:">
      <el-select v-model="dataForm.damageType" placeholder="请选择">
        <el-option
          v-for="item in damageType"
          :key="item.dictCode"
          :label="item.dictName"
          :value="item.dictCode"
        ></el-option>
      </el-select>
    </mt-cell>
    <mt-cell title="航空器运输企业:">
      <el-input v-model="dataForm.enterprise"></el-input>
    </mt-cell>
    <mt-cell title="发生地:">
      <el-select v-model="dataForm.scene" placeholder="请选择">
        <el-option
          v-for="item in damageArea"
          :key="item.dictCode"
          :label="item.dictName"
          :value="item.dictCode"
        ></el-option>
      </el-select>
    </mt-cell>
    <mt-cell title="起跑道:">
      <el-input v-model="dataForm.runway" :disabled="sceneDisbale"></el-input>
    </mt-cell>
    <mt-cell title="航空器型式/型号:">
      <el-input v-model="dataForm.airType"></el-input>
    </mt-cell>

    <mt-cell
      title="伤口尺寸:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    ></mt-cell>
    <mt-cell
      title
      class="CKG"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.length"></el-input>
      <span>长（mm）</span>
      <el-input v-model="dataForm.width "></el-input>
      <span>宽（mm）</span>
      <el-input v-model="dataForm.depth"></el-input>
      <span>深（mm）</span>
    </mt-cell>
    <mt-cell title="航空器注册号:">
      <el-input v-model="dataForm.registration"></el-input>
    </mt-cell>
    <mt-cell title="沟槽深度:" v-if="this.dataForm.damageType == 'tire'">
      <el-input v-model="dataForm.grooveDepth"></el-input>mm
    </mt-cell>
    <mt-cell title="发现日期时间:">
      <span
        @click="selectData"
        style="display:block;margin-right:0.5rem;cursor: pointer;"
      >{{this.dataForm.findDate}}</span>
      <div class="pickerPop" @touchmove.prevent>
        <!-- 年月日时分选择 -->
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker"
          v-model="selectedValue"
          class="myPicker"
          type="datetime"
          year-format="{value}"
          month-format="{value}"
          date-format="{value}"
          hour-format="{value}"
          minute-format="{value}"
          second-format="{value}"
          @confirm="dateConfirm()"
        ></mt-datetime-picker>
      </div>
    </mt-cell>
    <mt-cell
      title="伤口形状:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.woundShape"></el-input>
    </mt-cell>
    <mt-cell title="航班号:">
      <el-input v-model="dataForm.flightNumber"></el-input>
    </mt-cell>
    <mt-cell
      title="携外来物:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-radio v-model="dataForm.foreignMaterialsWound" label="0">无</el-radio>
      <el-radio v-model="dataForm.foreignMaterialsWound" label="1">有：
        <el-input v-model="dataForm.foreignMaterials" :disabled="foreignMaterialsWoundDisbale"></el-input>
      </el-radio>
    </mt-cell>
    <mt-cell title="本航段起飞机场:">
      <el-input v-model="dataForm.takeoffAirport"></el-input>
    </mt-cell>
    <mt-cell title="受损位置:">
      <el-checkbox-group
        v-model="dataForm.damagedLocation"
        v-if="this.dataForm.damageType == 'tire'"
      >
        <el-checkbox label="0">胎面</el-checkbox>
        <el-checkbox label="1">胎肩</el-checkbox>
        <el-checkbox label="2">胎侧</el-checkbox>
      </el-checkbox-group>
      <el-input
        v-model="dataForm.damagedLocation"
        v-if="this.dataForm.damageType == 'notTire' || this.dataForm.damageType == 'other'"
      ></el-input>
    </mt-cell>

    <mt-cell title="着落机场:">
      <el-input v-model="dataForm.landingAirport"></el-input>
    </mt-cell>
    <mt-cell title="更换轮胎:" v-if="this.dataForm.damageType == 'tire'">
      <el-radio v-model="dataForm.tireReplacement" label="1">是</el-radio>
      <el-radio v-model="dataForm.tireReplacement" label="0">否</el-radio>
    </mt-cell>
    <mt-cell title="是否有监控视频:" v-if="this.dataForm.damageType == 'notTire'">
      <el-radio v-model="radio" label="1">是</el-radio>
      <el-radio v-model="radio" label="2">否</el-radio>
      <el-input v-model="dataForm.locationTires"></el-input>
    </mt-cell>

    <mt-cell title="发现阶段:">
      <el-radio v-model="dataForm.discoveryPhase" label="before">航前</el-radio>
      <el-radio v-model="dataForm.discoveryPhase" label="pass">过站</el-radio>
      <el-radio v-model="dataForm.discoveryPhase" label="after">航后</el-radio>
    </mt-cell>
    <mt-cell title="文件上传:" v-if="this.dataForm.damageType == 'notTire'"></mt-cell>
    <div>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>
    </div>
    <mt-cell title="判定结果:" class="pdjg">
      <el-select
        v-model="dataForm.decisionResult"
        placeholder="请选择"
        v-if="this.dataForm.damageType == 'notTire' || this.dataForm.damageType == 'tire'"
      >
        <el-option
          v-for="item in damageResult"
          :key="item.dictCode"
          :label="item.dictName"
          :value="item.dictCode"
        ></el-option>
      </el-select>
      <el-input
        v-model="dataForm.decisionResult "
        type="textarea"
        v-if="this.dataForm.damageType == 'other'"
        class="decisionResulttextarea"
      ></el-input>
    </mt-cell>

    <mt-cell
      title="机场部门:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.airportSector"></el-input>
    </mt-cell>
    <mt-cell
      title="航空器维修部门:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.maintenanceDepartment"></el-input>
    </mt-cell>

    <mt-cell title="地面管制室现场处理人员:" v-if="this.dataForm.damageType == 'notTire'">
      <el-input v-model="dataForm.airportSector"></el-input>
    </mt-cell>
    <mt-cell title="接报时间:" v-if="this.dataForm.damageType == 'notTire'">
      <span
        @click="selectData1"
        style="display:block;margin-right:0.5rem;cursor: pointer;"
      >{{this.dataForm.receivingTime}}</span>
      <div class="pickerPop" @touchmove.prevent>
        <!-- 年月日时分选择 -->
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker1"
          v-model="selectedValue1"
          class="myPicker"
          type="datetime"
          year-format="{value}"
          month-format="{value}"
          date-format="{value}"
          hour-format="{value}"
          minute-format="{value}"
          second-format="{value}"
          @confirm="dateConfirm1()"
        ></mt-datetime-picker>
      </div>
    </mt-cell>

    <mt-cell
      title="签字日期:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <span
        @click="selectData2"
        style="display:block;margin-right:0.5rem;cursor: pointer;"
      >{{this.dataForm.dateSignature}}</span>
      <div class="pickerPop" @touchmove.prevent>
        <!-- 年月日时分选择 -->
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker2"
          v-model="selectedValue2"
          class="myPicker"
          type="datetime"
          year-format="{value}"
          month-format="{value}"
          date-format="{value}"
          hour-format="{value}"
          minute-format="{value}"
          second-format="{value}"
          @confirm="dateConfirm2()"
        ></mt-datetime-picker>
      </div>
    </mt-cell>

    <mt-cell
      title="机场人员签字:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.airportSignature"></el-input>
    </mt-cell>
    <mt-cell
      title="维修人员签字:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.signatureMaintenance"></el-input>
    </mt-cell>

    <mt-cell
      title="签字日期:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <span
        @click="selectData3"
        style="display:block;margin-right:0.5rem;cursor: pointer;"
      >{{this.dataForm.dateSignatureAirport}}</span>
      <div class="pickerPop" @touchmove.prevent>
        <!-- 年月日时分选择 -->
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker3"
          v-model="selectedValue3"
          class="myPicker"
          type="datetime"
          year-format="{value}"
          month-format="{value}"
          date-format="{value}"
          hour-format="{value}"
          minute-format="{value}"
          second-format="{value}"
          @confirm="dateConfirm3()"
        ></mt-datetime-picker>
      </div>
    </mt-cell>

    <mt-cell
      title="维修员手机:"
      v-if="this.dataForm.damageType == 'tire' || this.dataForm.damageType == 'other'"
    >
      <el-input v-model="dataForm.airportPhones"></el-input>
    </mt-cell>
    <mt-cell title="飞行区管理部现场处理人员:" v-if="this.dataForm.damageType == 'notTire'">
      <el-input v-model="dataForm.airportSignature"></el-input>
    </mt-cell>
    <mt-cell title="上传维修照片:"></mt-cell>
    <div>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>
    </div>

    <mt-field label="备注" placeholder="备注" type="textarea" rows="4" v-model="dataForm.remarks"></mt-field>
    <div v-if="this.dataForm.damageType == 'tire'">
      <mt-cell title="参考信息:"></mt-cell>
      <mt-cell title="轮胎所处位置位于:">
        <el-input v-model="dataForm.locationTires">
          <span>轮</span>
        </el-input>
      </mt-cell>
      <mt-cell title="轮胎位置编号:">
        <el-input v-model="dataForm.tireLocationNumber"></el-input>
      </mt-cell>
      <mt-cell title="轮胎序号:">
        <el-input v-model="dataForm.tireSerialNumber"></el-input>
      </mt-cell>
      <mt-cell title="轮胎规格:">
        <el-input v-model="dataForm.tireSpecification"></el-input>
      </mt-cell>

      <mt-cell title="轮胎件号:">
        <el-input v-model="dataForm.tireNumber"></el-input>
      </mt-cell>
      <mt-cell title="轮胎类型:">
        <el-radio v-model="dataForm.tireType " label="1">子午胎</el-radio>
        <el-radio v-model="dataForm.tireType " label="0">斜交胎</el-radio>
      </mt-cell>
      <mt-cell title="翻新次数:">
        <el-radio v-model="dataForm.refurbished" label="1">无</el-radio>
        <el-radio v-model="dataForm.refurbished" label="0">有</el-radio>
      </mt-cell>
      <mt-cell title>
        <span>
          <el-input
            v-model="dataForm.refurbishmentTimes"
            :disabled="refurbishedDisbale"
            style="width:24%;"
          ></el-input>次，翻新厂家：
          <el-input
            v-model="dataForm.refurbishmentFactory"
            :disabled="refurbishedDisbale"
            style="width:24%;"
          ></el-input>
        </span>
      </mt-cell>
      <mt-cell title="轮胎使用起落次数:">
        <el-input v-model="dataForm.timesOfTireUse"></el-input>
      </mt-cell>
      <mt-cell title="当日已飞航段:">
        <el-input v-model="dataForm.flightSection"></el-input>
      </mt-cell>
    </div>
    <div>
      <p>填写说明：</p>
      <p>1、表中各项内容应尽可能填写，如果对于表中某项内容无法确定或达成一致的，可不填写或勾选“不详”，并在备注中说明相关情况。</p>
      <p>2、“参考信息”部分由香菜确认人员填写，可在事后完成填写。</p>
    </div>
    <div class="save">
      <el-button type="primary" @click="dataFormSubmitHandle">保存</el-button>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import { DatetimePicker } from "mint-ui";
import { formatDateMin } from "@/common/js/time.js";
export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "轮胎受损"
        },
        {
          value: "2",
          label: "非轮胎受损"
        },
        {
          value: "3",
          label: "其他"
        }
      ],
      dialogImageUrl: "",
      dialogVisible: false,
      value: "",
      value1: "",
      checked: "",
      fileList3: [],
      refurbishedDisbale: true,
      sceneDisbale: true,
      foreignMaterialsWoundDisbale: true,
      Valid: "",
      dataForm: {
        id: "",
        enterprise: "",
        scene: "",
        airType: "",
        damageType: "tire",
        registration: "",
        findDate: "请选择日期",
        takeoffAirport: "",
        landingAirport: "",
        discoveryPhase: [],
        tireReplacement: "",
        length: "",
        width: "",
        depth: "",
        foreignMaterials: "",
        flightNumber: "",
        maintenanceDepartment: "",
        decisionResult: "",
        timesOfTireUse: "",
        tireSerialNumber: "",
        locationTires: "",
        tireLocationNumber: "",
        maintenancePhones: "",
        tireType: "",
        signatureMaintenance: "",
        airportSector: "",
        dateSignature: "请选择日期",
        receivingTime: "请选择日期",
        airportPhones: "",
        tireSpecification: "",
        remarks: "",
        dataForm: "",
        dateSignatureAirport: "请选择日期",
        flightSection: "",
        runway: "",
        foreignMaterialsWound: "",
        grooveDepth: "", //沟槽深度
        woundShape: "", //伤口形状
        damagedLocation: [], //受损位置
        refurbished: [], //受损位置
        code: "" //受损位置
      },
      damageArea: [], //发生地
      damageType: [], //受损类型
      damageResult: [],
      damageTypeAll: "",
      imageUrl: "",
      radio: "",
      selectedValue: "",
      selectedValue1: "",
      selectedValue2: "",
      selectedValue3: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  watch: {
    $route(to, from) {
      this.Valid = this.$route.query.val;
    },
    valid: function(oy1) {
      console.log(oy1);
    },
    "dataForm.refurbished": {
      handler(oy1) {
        if (oy1 == 0) {
          this.refurbishedDisbale = false;
        } else {
          this.refurbishedDisbale = true;
        }
      },
      deep: true
    },
    "dataForm.scene": {
      handler(oy1) {
        if (oy1 == "offAireport" || oy1 == "landAirport") {
          this.sceneDisbale = false;
        } else {
          this.sceneDisbale = true;
        }
      },
      deep: true
    },
    "dataForm.foreignMaterialsWound": {
      handler(oy1) {
        if (oy1 == "1") {
          this.foreignMaterialsWoundDisbale = false;
        } else {
          this.foreignMaterialsWoundDisbale = true;
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$store.commit("SET_USER_INFO", "航空器损伤记录表");
    this.select_msg();
  },
  methods: {
    selectData() {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue) {
        this.selectedValue = this.selectedValue;
      } else {
        this.selectedValue = new Date();
      }
      this.$refs["datePicker"].open();
    },
    dateConfirm() {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
      this.dataForm.findDate = formatDateMin(this.selectedValue);
    },
    selectData1() {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue1) {
        this.selectedValue1 = this.selectedValue1;
      } else {
        this.selectedValue1 = new Date();
      }
      this.$refs["datePicker1"].open();
    },
    dateConfirm1() {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
      this.dataForm.receivingTime = formatDateMin(this.selectedValue1);
    },
    selectData2() {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue2) {
        this.selectedValue2 = this.selectedValue2;
      } else {
        this.selectedValue2 = new Date();
      }
      this.$refs["datePicker2"].open();
    },
    dateConfirm2() {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
      this.dataForm.dateSignature = formatDateMin(this.selectedValue2);
    },
    selectData3() {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue3) {
        this.selectedValue3 = this.selectedValue3;
      } else {
        this.selectedValue3 = new Date();
      }
      this.$refs["datePicker3"].open();
    },
    dateConfirm3() {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
      this.dataForm.dateSignatureAirport = formatDateMin(this.selectedValue3);
    },
    handleChange() {},
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    select_msg() {
      this.$store.dispatch("damagedict").then(data => {
        this.damageArea = data.damageArea;
        this.damageType = data.damageType;
        this.damageResult = data.damageResult;
      });
    },
    // 表单提交
    dataFormSubmitHandle() {
      if (this.dataForm.findDate == "请选择日期") {
        this.dataForm.findDate = "";
      } else if (this.dataForm.dateSignatureAirport == "请选择日期") {
        this.dataForm.dateSignatureAirport = "";
      } else if (this.dataForm.receivingTime == "请选择日期") {
        this.dataForm.receivingTime = "";
      }

      this.$store.dispatch("damagsave", this.dataForm).then(data => {
        console.log(data);
      });
    }
  },
  components: {}
};
</script>
<style>
.Driverfiledetails {
  position: fixed;
  top: 0.7rem;
  left: 0;
  overflow-y: scroll;
  width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch; /*这句是为了滑动更顺畅*/
  bottom: 0;
}
.Driverfiledetails .mint-cell-title {
  text-align: left;
}
.Driverfiledetails .mint-cell-title {
  text-align: left;
}
.footerButton {
  margin-top: 0.7rem;
  text-align: center;
  margin-bottom: 0.7rem;
}
.Driverfiledetails input {
  border: none;
  border-radius: 0;
}
.Driverfiledetails .el-upload--picture-card {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.Driverfiledetails .el-upload-list--picture-card .el-upload-list__item {
  width: 2rem;
  height: 2rem;
}
.Driverfiledetails .mint-cell-wrapper {
  border: 1px solid #eee;
}
.margin_10 {
  margin-right: 1.5rem;
}
.Driverfiledetails input {
  height: 0.4rem;
  line-height: 0.4rem;
  border-bottom: 1px solid #eee;
}
</style>
